import { useEffect } from "react";
import "./IntersectionObserverTest.scss";

export function IntersectionObserverTest() {
  useEffect(() => {
    const intersectionObserver = new IntersectionObserver(
      function (entries) {
        console.log("info:");
        entries.forEach((item) => {
          console.log(item.target, item.intersectionRatio);
        });
      },
      {
        threshold: [0.5, 0.7, 1],
      }
    );

    intersectionObserver.observe(document.querySelector("#box1"));
    intersectionObserver.observe(document.querySelector("#box2"));
    return () => {};
  }, []);
  return (
    <>
      <div id="box1">BOX111</div>
      <div id="box2">BOX222</div>
    </>
  );
}
